<template>
  <div class="list">
    <ul>
      <li class="item"
          v-for="item of cityLetters"
          :key="item"
          :ref="item"
          @click="handleClick"
          @touchstart.prevent="handleTouchStart"
          @touchmove="handleTouchMove"
          @touchend="handleTouchEnd">{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'CityAlphabet',
  props: {
    cities: Object
  },
  data () {
    return {
      touchStatus: false,
      cityletter: '',
      startY: 0,
      timer: null
      // canRun: true
    }
  },
  computed: {
    cityLetters () {
      let cityArray = []
      for (let i in this.cities) {
        cityArray.push(i)
      }
      return cityArray
    }
  },
  updated () {
    this.startY = this.$refs['A'][0].offsetTop
  },
  methods: {
    handleClick () {
      let letter = event.target.innerText
      this.$emit('cityChange', letter)
      this.cityletter = letter
      // console.log(this.$refs)
    },
    handleTouchStart () {
      this.touchStatus = true
    },
    handleTouchMove (e) {
      /*
      设置这个防抖的原因是手指滑动屏幕后触发touchmove事件的频率太快,这样设置后如果两次触发事件时间间隔在16毫秒之内
      则会先取消上次的操作,再16毫秒后执行本次操作,如果16ms内没有再触发事件则执行延迟器里的计算,其实人手指正常滑动触发事件的时间
      间隔要大于16ms,才会导致你滑到哪页面页面依旧跟到哪(执行动作),如果这个时间间隔小于16ms,就会一直重新定义计时,不会执行动作,只会执行
      最后一次的动作,仔细想想在这里用函数防抖,其实意义不大,如果滑动速度正常执行的动作还是执行了,没有减少频率,只有手指滑动速度非常快
      导致触发事件时间间隔小于16ms才会减少执行动作,减少运算操作
      一段时间内再被触发,取消上次动作,重设计时器
      */

      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        if (this.touchStatus) {
          let touchY = e.touches[0].clientY - 79.8 - this.startY
          let index = Math.floor(touchY / 22)
          if (index >= 0 && index < this.cityLetters.length) {
            this.$emit('cityChange', this.cityLetters[index])
            this.cityletter = this.cityLetters[index]
          }
        }
      }, 16)

      /*
        函数节流规定一定时间内只会执行一次操作,无论你滑动的速度大小,在指定时间内只会执行一次
        一段时间内再被触发则阻止执行动作
      */
      /*
       if (!this.canRun) {
         return
       }
       this.canRun = false
       setTimeout(() => {
         if (this.touchStatus) {
           let touchY = e.touches[0].clientY - 79.8 - this.startY
           let index = Math.floor(touchY / 22)
           if (index >= 0 && index < this.cityLetters.length) {
             this.$emit('cityChange', this.cityLetters[index])
             this.cityletter = this.cityLetters[index]
             this.canRun = true
           }
         }
       }, 20)
       */
    },
    handleTouchEnd (e) {
      this.touchStatus = false
    }
  },
  watch: {
    cityletter (newvalue, oldvalue) {
      this.$refs[newvalue][0].style.color = 'yellow'
      if (oldvalue) { this.$refs[oldvalue][0].style.color = '#00bcd4' }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.list
  position absolute
  display flex
  flex-direction column
  justify-content center
  top 1.6rem
  right 0
  bottom 0
  width 0.5rem
  .item
    line-height 0.45rem
    text-align center
    color $bgColor
</style>
